<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>box-sizing拯救了我们的布局</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
.wrapper {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	color:#fff;
	font-size: 30px;
	text-align: center;
	background: #ccc;
}
#header {
	height: 100px;
	background: #38382e;
	margin-bottom: 10px;
	border: 10px solid red;
	padding: 10px;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.sidebar {
	float: left;
	width: 220px;
	margin-right: 20px;
	margin-bottom: 10px;
	height: 300px;
	background: #5d33cf;
	border: 10px solid red;
	padding: 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.content {
	float: left;
	width: 720px;
	height: 300px;
	background: #c8ca30;
	margin-bottom: 10px;
	border: 10px solid red;
	padding: 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
#footer {
	background: #cc4ad5;
	height: 100px;
	text-align: center;
	clear: both;
	border: 10px solid red;
	padding: 10px;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
</style>
</head>
<body>
	<div class="wrapper">
		<div id="header">页眉</div>
		<div class="sidebar">侧边栏</div>
		<div class="content">主内容</div>
		<div id="footer">页脚</div>
	</div>
</body>
</html>